<template>
    <nav-bar>
        <div slot="left" @click="back">
            <img src="~assets/img/common/back.svg" alt="">
        </div>
        <div slot="center" class="Details">
            <div class="Details-item"  v-for="(item,index) in titles" :key="index" @click="currentShow(index)" :class="{active:currentIndex == index}">{{item}}</div>
        </div>
    </nav-bar>
</template>
<script>
    import NavBar from 'components/common/navbar/NavBar'
    export default {
        name:'DetailsNavBar',
        data(){
            return {
                titles:['商品','参数','评论','推荐'],
                currentIndex:0
            }
        },
        components:{
            NavBar
        },
        methods: {
            currentShow(index){
                this.currentIndex = index;
                console.log(index);
                // 点击对应的名称跳转到对应位置
                this.$emit('titleClick',index);
            },
            back(){
                this.$router.back()
            }
        },
    }
</script>
<style scope>
  .back {
    margin: 6px 13px;
  }
  .Details {
    display: flex;
    font-size: 13px;
  }
  .Details-item {
    flex: 1;
  }
  .active {
    color: var(--color-tint);
  }
</style>